@use 'src/components/style/foundation/media-queries' as media;
@use 'src/components/style/foundation/mixins' as mixins;
@use 'src/components/style/foundation/spacing' as spacing;
@use 'src/components/style/foundation/typography' as typography;
@use 'src/components/style/foundation/colors' as colors;

.Heading {
  font-weight: bold;

  &,
  & a {
    font-family: typography.font-family(heading);
  }
}

.Inner {
  display: inline-block;
  position: relative;
}

.Heading-1 {
  font-weight: normal;
  margin: spacing.spacing(extra-loose) 0 0 0;
  position: relative;
  font-size: typography.font-size(heading, h1-mobile);

  @include media.media(media.$media-query--mobile-up) {
    font-size: typography.font-size(heading, h1);
  }

  .Inner {
    @include mixins.underlined();

    &::after {
      bottom: 6px;

      :global(.theme--dark) & {
        height: 5px;
        bottom: 6px;
      }
    }
  }
}

.Heading-sub {
  font-size: 1em;
  font-weight: normal;
  font-family: typography.font-family(base);
  color: colors.color(gray);
  margin: 0 0 spacing.spacing(tight) 0;

  :global(.theme--dark) & {
    color: colors.color(gray, baseDark);
  }

  @include media.media(media.$media-query--tablet-up) {
    margin: 0 0 spacing.spacing(extra-loose) 0;
  }
}

.Heading-2 {
  font-size: typography.font-size(heading, h2);
}

.Heading-3 {
  font-size: typography.font-size(heading, h3);
  margin-top: spacing.spacing(extra-loose);
  margin-bottom: spacing.spacing(loose);

  .Inner {
    @include mixins.underlined();
  }
}

.Heading-4 {
  margin-top: 0;
  margin-bottom: spacing.spacing(extra-tight);
}

